
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'



interface iState {
    src: string
}

export default class App extends Component {

    state: iState = {
        src: ' '
    }

    getFile = (e: React.ChangeEvent<HTMLInputElement>) => {


        if (e.target.files) {
            // console.dir(e.target.files[0]);

            // 将选择的文件显示出来有两种方法
            // 1. 通过文件创建一个临时的 url 地址
            // this.setState({
            //     src: URL.createObjectURL(e.target.files[0])
            // })

            // 2. 将文件转换成 base64 然后使用
            // a. 创建一个文件加载器
            const reader = new FileReader()
            // b. 读取选择的文件
            reader.readAsDataURL(e.target.files[0])

            // c. 监听文件加载成功
            reader.onload = () => {
                // d. 将结果赋值给 src
                this.setState({
                    src: reader.result
                })
            }

        }

    }

    render() {
        return <>
            <div>
                <input type="file" onChange={this.getFile} />

                <span>{this.state.src}</span>
                <img src={this.state.src} alt="加载中..." />
            </div>
        </>
    }
}